// Core variables and mixins overrides
@import "~bootstrap/scss/_functions.scss";
@import "../core/variables/variables";

// Overrides user variable
@import "../core/variables/components-variables";

.page-content-header {

  .content-title {
    color: $gray-400;
  }

}

.analytics-update-btn, .dark_select__control {
  min-height: 45px;
}

.analytics-update-btn {
  width: 100%;

  svg {
    margin-right: 6px;
  }
}

.analytics-select-project {
  max-width: 380px;
  width: 100%;
}

.analytics-select-limit, .analytics-update-button {
  max-width: 180px;
  width: 100%;
}

.analytics-update-button, .analytics-select-limit {
  margin-left: 18px;
}

.analytics-update-button .react-ripples {
  width: 100%;
}

.statistics-card-item {
  padding: 8px 0;
  border-top: 1px solid rgba(34, 41, 47, 0.1);

  &:first-child {
    padding-top: 0;
    border-top: none;
  }

  &:last-child {
    padding-bottom: 0;
  }
}

.analytics-card__header {
  padding: 19px 22px 0 22px;
}
.followers-card__chart {
  padding: 0 14px 0 3px;
}
.analytics-card__title {
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}
.followers-card__count-title {
  font-size: 11px;
  line-height: 13px;
}
.followers-card__count-value {
  font-size: 24px;
  line-height: 29px;
}
.followers-card__content {
  margin-top: 5px;
}
.age-card__content {
  padding-right: 10px;
}
.analytics-card__progress {
  width: 100%;
  margin-bottom: 0;
  margin-right: 15px;
}
.analytics-card__content {
  padding: 25px 20px 34px 20px;
}
.relation-card__item {
  margin-top: 35px;
  &:first-child {
    margin-top: 0
  }
}

body.dark-layout .analytics-select-project .dark_select__control {
  background-color: #10163a;
  border-color: #10163a;
}

.analytics-card__content .relation-card__collapse-item {
  margin-top: 35px;
}
.analytics-card__info {
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}
.country-card__info {
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
}
.country-card__count {
  font-weight: normal;
  font-size: 16px;
  line-height: 15px;
  margin-top: 5px;
}
.country-card__item {
  margin-top: 16px;
  &:first-child {
    margin-top: 0;
  }
}
.analytics-card__content .country-card__collapse-item {
  margin-top: 18px;
}
.involvement-card__content {
  padding-bottom: 10px;
  position: relative;
  min-height: 254px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.involvement-card__chart {
  position: absolute;
  height: 315px;
}
.big-progress-analytics {
  height: 10px;
  border-radius: 2.5px;
  .progress-bar {
    border-radius: 2.5px;
  }
}
.small-progress-analytics {
  height: 5px;
  border-radius: 2.5px;
  .progress-bar {
    border-radius: 2.5px;
  }
}
.artist-name{
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 29px;
  color: #EBEEFC!important;
}
.track-name{
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 29px;
  color: #EBEEFC!important;
}
.artist{
  /*min-width: 25%;
  max-width: 25%;*/
  word-wrap: break-word;
}
.border-radius-50{
  border-radius: 50%;
}
.analytics-card__content-small {
  min-height: 255px;
  display: flex;
  flex-direction: column;
}
.spotify-card__desc {
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
}
.popularity {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 22px;
  color: #6F64F8!important;
}
.popularity-count {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 29px;
  color: #EBEEFC!important;
}
.spotify-card__followers-value {
  font-weight: bold;
  font-size: 48px;
  line-height: 29px;
  margin-top: 20px;
  white-space: pre;
}
.spotify-card__followers-desc, .relation-card__more-link {
  white-space: pre;
}
.spotify-card__info-item {
  margin-top: 35px;
  &:first-child {
    margin-top: 0;
  }
}
.analytics-card__value {
  font-weight: bold;
  font-size: 24px;
  line-height: 29px;
}
.spotify-card__info-value {
  margin-left: 10px;
}
.analytics-select {
  .dark_select__control {
    min-height: 45px;
  }
}

body {
  &.dark-layout {
    .page-content-header {

      .content-title {
        color: $theme-dark-heading-color;
      }

    }

    .statistics-card-item {
      border-color: #414561;
    }
    .bg-gray {
      background: rgba(15, 22, 66, 0.35);
    }
    .analytics-card__title, .country-card__count, .spotify-card__info-item {
      color: #ffffff;
    }
    .spotify-card__followers-value {
      color: #EBEEFC;
    }
    .analytics-card .apexcharts-canvas .apexcharts-inner rect {
      fill: #1d2447;
    }

  }

}

@media screen and(max-width: 1570px) and (min-width: 1200px) {
  .spotify-card__desc {
    font-size: 14px;
    line-height: 20px;
  }
  .spotify-card__followers-value {
    font-size: 35px;
    line-height: 24px;
  }
}

@media screen and(max-width: 1400px) and (min-width: 1200px) {
  .analytics-card__info {
    font-size: 14px;
    line-height: normal;
  }
}

@media screen and(max-width: 1400px) and (min-width: 991px) {
  .analytics-card__value {
    font-size: 18px;
    line-height: normal;
  }
  .analytics-card__title {
    font-size: 16px;
    line-height: normal;
  }
}

@media screen and(max-width: 1300px) and (min-width: 1200px) {
  .age-card {
    padding-right: 0!important;
  }
  .involvement-card {
    padding-left: 0!important;
  }
}

@media screen and(max-width: 880px) {

  .analytics-select-limit, .analytics-update-button {
    max-width: 140px;
  }

  .analytics-update-btn {
    padding-left: 0!important;
    padding-right: 0!important;
  }

}

@media screen and(max-width: 767px) {
  .spotify-card__info-item {
    margin-top: 15px;
  }
}

@media screen and(max-width: 575px) {

  .analytics-select-project {
    max-width: 100%;
  }

  .analytics-select-limit, .analytics-update-button {
    max-width: 48.5%;
    display: inline-block;
    margin-left: 0;
  }

  .analytics-select-limit {
    float: left;
  }

  .analytics-update-button {
    float: right;
  }

  .analytics-update-btn {
    padding-left: 0!important;
    padding-right: 0!important;
  }

}


@media screen and(max-width: 500px) {
  .spotify-card__desc {
    font-size: 14px;
    line-height: 20px;
  }
  .spotify-card__followers-value {
    font-size: 40px;
    line-height: 22px;
  }
}


@media screen and(max-width: 375px) {
  .analytics-card__title {
    font-size: 16px;
    line-height: 20px;
  }
  .analytics-card__info {
    font-size: 14px;
    line-height: 20px;
  }
  .analytics-card__value {
    font-size: 18px;
    line-height: normal;
  }
}

